<template>
	<section class="brandDetail">
		<div class="table">
			<el-row class="header_row">
                <el-col :span="24">品牌基本信息</el-col>
           	</el-row>
            <el-row>
                <el-col :span="4" class="col_1">品牌名称：</el-col>
                <el-col :span="8" class="col_2">{{ brandDetail.brandName }}</el-col>
                <el-col :span="4" class="col_3">客户名称：</el-col>
                <el-col :span="8" class="col_4">{{ brandDetail.customerName }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">销售员：</el-col>
                <el-col :span="8" class="col_2">{{ brandDetail.salesPerson }}</el-col>
                <el-col :span="4" class="col_3">知产员：</el-col>
                <el-col :span="8" class="col_4">{{ brandDetail.knowLedgePerson }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">购买员：</el-col>
                <el-col :span="8" class="col_2">{{ brandDetail.purchaser }}</el-col>
                <el-col :span="4" class="col_3">对接员：</el-col>
                <el-col :span="8" class="col_4">{{ brandDetail.buttPerson }}</el-col>
            </el-row>
		</div>
		<div class="table">
			<el-row class="header_row">
                <el-col :span="24">维权通服务</el-col>
           	</el-row>
            <el-row>
                <el-col :span="4" class="col_1">联系人姓名：</el-col>
                <el-col :span="8" class="col_2">{{ brandDetail.userName }}</el-col>
                <el-col :span="4" class="col_3">手机号码：</el-col>
                <el-col :span="2" class="col_4" v-model='showTel'>{{ brandDetail.tel }}</el-col>
                <el-col :span="6" class="col_4" v-show='showTel'><span class="Tel">(维权通登录账号)</span></el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">办公电话：</el-col>
                <el-col :span="8" class="col_2">{{ brandDetail.phone }}</el-col>
                <el-col :span="4" class="col_3">QQ：</el-col>
                <el-col :span="8" class="col_4">{{ brandDetail.qq }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">
                	<el-checkbox v-model="brandDetail.serviceFlag" :disabled="disabled"></el-checkbox>
                	投诉服务
                </el-col>
                <el-col :span="20" class="col_4"></el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">是否有价格表：</el-col>
                <el-col :span="8" class="col_2">{{ brandDetail.isPriceList }}</el-col>
                <el-col :span="4" class="col_3">是否有白名单：</el-col>
                <el-col :span="8" class="col_4">{{ brandDetail.isWhiteList }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">投诉账号：</el-col>
                <el-col :span="8" class="col_2">{{ brandDetail.complaintsAccount }}</el-col>
                <el-col :span="4" class="col_3">投诉密码：</el-col>
                <el-col :span="8" class="col_4">{{ brandDetail.complaintsPwd }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">投诉账号邮箱密码：</el-col>
                <el-col :span="8" class="col_2">{{ brandDetail.emailPwd }}</el-col>
                <el-col :span="4" class="col_3">投诉账号验证手机：</el-col>
                <el-col :span="8" class="col_4">{{ brandDetail.complaintsAccountTel }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1">
                	<el-checkbox v-model="brandDetail.numberFlag" :disabled="disabled"></el-checkbox>
                	数据服务：
                </el-col>
                <el-col :span="8" class="col_2"></el-col>
                <el-col :span="12" >
                    <el-button  type="primary" size="small" @click="editService" style="margin-left:24px" v-show='showButton' :disabled="disabledService">修改维权通服务</el-button>
                </el-col>
            </el-row>
		</div>
		<div class="table">
            <el-row class="header_row">
                <el-col :span="24">跟进信息</el-col>
            </el-row>
            <el-row>
            	<el-col :span="4" class="col_1">品牌类别：</el-col>
                <el-col :span="8" class="col_2">
                    <el-select size="small" v-model="brandDetail.brandLevel" :disabled="disabled">
                        <el-option 
				        	v-for="(item,index,key) in brandLevels"
				        	:key="index"
				        	:label="item.label"
				        	:value="item.value">
				        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4" class="col_3">是否紧急：</el-col>
                <el-col :span="8" class="col_4" :disabled="disabled">
                	<el-radio v-model="brandDetail.urgentState" class="radio" label="0" :disabled="disabled">否</el-radio>
                    <el-radio v-model="brandDetail.urgentState" class="radio" label="1" :disabled="disabled">是</el-radio>
                </el-col>
            </el-row>
            <el-row>
            	<el-col :span="4" class="col_1">小计类型：</el-col>
                <el-col :span="8" class="col_2">
                    <el-radio v-model="brandDetail.totalTypeState" class="radio" label="1" :disabled="disabled">知产</el-radio>
                    <el-radio v-model="brandDetail.totalTypeState" class="radio" label="2" :disabled="disabled">购买</el-radio>
                    <el-radio v-model="brandDetail.totalTypeState" class="radio" label="3" :disabled="disabled">对接</el-radio>
                </el-col>
            	<el-col :span="4" class="col_3">下次联系时间：</el-col>
                <el-col :span="8" class="col_4">
                    <el-date-picker type="datetime" size="small" v-model="brandDetail.nextPlanDate"
                                    :picker-options="pickerOptions" :editable="pickerState"></el-date-picker>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4" class="col_1 content_title">跟进内容：</el-col>
                <el-col :span="20" class="col_4 content_text">
                    <el-input type="textarea" :rows="13" v-model="brandDetail.contents" :disabled="disabled"></el-input>
                </el-col>
            </el-row>
            <el-row class="table_action_row">
                <el-col :span="24">
                    <el-button @click="onSubmit" type="primary" size="small"  icon="el-icon-plus" :disabled="disabled">保存</el-button>
                </el-col>
            </el-row>
        </div>
        <el-form class="selectForm">
        	<el-row >
                <el-col :span="6">
                	<el-form-item label="小计类型: ">
                		<el-select size="small" v-model="brandDetail.totalType">
	                        <el-option 
					        	v-for="(item,index,key) in totalTypes"
					        	:key="index"
					        	:label="item.label"
					        	:value="item.value">
					        </el-option>
	                    </el-select>
                	</el-form-item>
                </el-col>
                <el-col :span="6">
                	<el-form-item label="添加时间: ">
                		<el-date-picker type="datetimerange" size="small" :picker-options="pickerOptions1" v-model="brandDetail.addPlanDate" start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                    ></el-date-picker>
                	</el-form-item>
                </el-col>
                <el-col :span="6">
                	<el-form-item label="下次联系时间: ">
                		<el-date-picker type="datetimerange" size="small" v-model="brandDetail.SelectNextplanDate" start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                    ></el-date-picker>
                	</el-form-item>
                </el-col>
                <el-col :span="6">
                	<el-form-item class="action_button_group_open">
                        <el-button size="small" type="primary" @click="empty"><i class="fa fa-trash-o fa-lg"></i> 清空筛选条件</el-button>
                        <el-button size="small" type="primary" @click="getBrandFollowInfoListByPage" icon="el-icon-search" :disabled="disabledSelect">查询</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="follow_list" v-for="(item,index) in followList" >
            <el-row>
                <el-col :span="5">添加时间: <span class="time_sty">{{ item.gmtCreate }}</span></el-col>
                <el-col :span="6">品牌类型：{{ item.brandTypeName }}</el-col>
                <el-col :span="5">下次联系时间：<span class="time_sty">{{ item.planTime }}</span></el-col>
                <el-col :span="4">添加人：{{ item.memberName }}</el-col>
                <el-col :span="4">小计类型：{{item.followTypeName}}</el-col>
            </el-row>
            <el-row>
                <el-col :span="20" class="follow_content" v-html="item.content">
                </el-col>
                <!-- <el-input type="textarea" :rows="13" v-model="item.contents"></el-input> -->
               	<el-col :span="4">
               		<el-button size="small" type="primary" @click="listUp(item.id)">小记置顶</el-button>
               	</el-col>
            </el-row>
        </div>
        <el-row class="empy" v-show='showEmpy'>
        	<el-col :span="24">暂无数据</el-col>
        </el-row>
        <el-row class="paging">
            <el-pagination
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    :current-page="pagingData.pageNum"
                    :page-sizes="pagingData.pageSizes"
                    :page-size="brandDetail.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagingData.total">
            </el-pagination>
        </el-row>

        
	</section>
</template>

<script>
	import Vue from 'vue'
	import {mapGetters} from 'vuex';
	import * as types from '../../store/mutation-types/customer/index';
	import {Row,Col,Checkbox,Button,Select,Option,Radio,DatePicker,Input,Form,FormItem,Message,Pagination} from 'element-ui'
	import {brandLevels,totalTypes} from '~/assets/js/option_brand'
	import {formatDate} from '~/assets/js/common.js';
	import {getDate} from '~/utils/auth'
	
	Vue.use(Row);
    Vue.use(Col);
    Vue.use(Checkbox);
    Vue.use(Button);
    Vue.use(Select);
    Vue.use(Option);
    Vue.use(Radio);
    Vue.use(DatePicker);
    Vue.use(Input);
    Vue.use(Form);
    Vue.use(FormItem);
    Vue.use(Pagination);
	Vue.prototype.$message = Message;
    export default {
    	head(){
	        return {
	            title: this.title
	        }
      	},
    	
    	data () {
            return {
            	tabName: '品牌详情',
            	title: '品牌详情',
            	brandId:'',
            	disabled:false,
            	disabledService:false,
            	disabledSelect:false,
            	showButton:true,
            	showTel:false,
            	showEmpy:false,
            	brandDetail:{
            		brandName:'',
            		customerName:'',
            		salesPerson:'',
            		knowLedgePerson:'',
            		purchaser:'',
            		buttPerson:'',
            		
            		userName:'',
            		tel:'',
            		phone:'',
            		qq:'',
            		serviceFlag:false,
            		isPriceList:'是',
            		isWhiteList:'是',
            		complaintsAccount:'',
            		complaintsPwd:'',
            		emailPwd:'',
            		complaintsAccountTel:'',
            		numberFlag:false,
            		
            		brandLevel:'0',
            		urgentState:'0',
            		totalTypeState:'',
            		nextPlanDate: '', 
            		contents:'',
            		addPlanDate:[],
            		SelectNextplanDate:[],
            		totalType:'',
            		
            		createDateBegin:'',
            		createDateEnd:'',
            		planTimeBegin:'',
            		planTimeEnd:'',
            		
            		pageSize:50
            	},
            	sortField:'',
            	sortOrder:'',
            	pickerState: false,
            	totalTypes:totalTypes,
            	brandLevels:brandLevels,
            	
            	pagingData: {
                    pageSizes: [10, 20, 50],    // 每页可选条数列表,
                    total: 0,
                    pageNum: 1
                },
            	
            	pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e7;
                    }
                },
                pickerOptions1: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                },
                
                followList:[],
            }
       },
       
       computed : {
            ...mapGetters({
                'pageTabsList': 'getPageTabsList'
            }),
		},
		mounted(){
			this.getUrl()
			this.getBrandDetailInfo()
			this.getHasFirst()
		},
		methods:{
			editService(){
				this.$router.push({path: '/brandadmin/brandEdit?id='+this.brandId});
			},
			onSubmit(){
				if (this.brandDetail.totalTypeState=='') {
					Message.error('请输入小计类型');
					return
				}
				let Info={
					'brandId':Number(this.brandId),
					'brandType':Number(this.brandDetail.brandLevel),
					'energencyFlag':Number(this.brandDetail.urgentState),
					'followType':Number(this.brandDetail.totalTypeState),
					'planTime':formatDate(this.brandDetail.nextPlanDate, 'YYYY-MM-dd hh:mm:ss'),
					'followContent':this.brandDetail.contents
				}
				this.$store.dispatch('addBrandFollowInfo',Info)
        			.then((response) => {
        				if (response) {
        					let result = response.data;
	        				if (result.successed == true) {
	                            Message.success('添加品牌跟进信息成功');
	                            this.getBrandFollowInfoListByPage()
	                        } else {
	                            Message.error(result.message);
	                        }
        				}
        			})
			},
			empty(){
				this.brandDetail.totalType='',
				this.brandDetail.addPlanDate='',
				this.brandDetail.SelectNextplanDate='',
				this.brandDetail.createDateBegin='',
				this.brandDetail.createDateEnd='',
				this.brandDetail.planTimeBegin='',
				this.brandDetail.planTimeEnd=''
			},
			getBrandFollowInfoListByPage(){
				if (this.brandDetail.addPlanDate&&this.brandDetail.addPlanDate[0]) {
                    this.brandDetail.createDateBegin = this.brandDetail.addPlanDate[0]?getDate(this.brandDetail.addPlanDate[0],true):'';
                    this.brandDetail.createDateEnd =  this.brandDetail.addPlanDate[1]?getDate(this.brandDetail.addPlanDate[1],true):'';
               }else{
                	this.brandDetail.createDateBegin='';
                	this.brandDetail.createDateEnd =''
                }

                if (this.brandDetail.SelectNextplanDate&&this.brandDetail.SelectNextplanDate[0]) {
                    this.brandDetail.planTimeBegin = this.brandDetail.SelectNextplanDate[0]?getDate(this.brandDetail.SelectNextplanDate[0],true):'';
                    this.brandDetail.planTimeEnd = this.brandDetail.SelectNextplanDate[1]?getDate(this.brandDetail.SelectNextplanDate[1],true):'';
                }else{
                	this.brandDetail.planTimeBegin='';
                	this.brandDetail.planTimeEnd='';
                }
                
                
                
				let FollowInfoList={
					'pageNum':this.pagingData.pageNum,
					'pageSize':this.brandDetail.pageSize,
					'brandId':Number(this.brandId),
					'followType':this.brandDetail.totalType,
					'createDateBegin':this.brandDetail.createDateBegin,
					'createDateEnd':this.brandDetail.createDateEnd,
					'planTimeBegin':this.brandDetail.planTimeBegin,
					'planTimeEnd':this.brandDetail.planTimeEnd,
					'sortField':this.sortField,
					'sortOrder':this.sortOrder
				}
				this.$store.dispatch('getBrandFollowInfoListByPage',FollowInfoList)
        			.then((response) => {
        				let result = response.data;
        				if (result.successed == true) {
        					if(result.data.list.length!=0){
        						this.showEmpy=false
        						this.followList=result.data.list
        						for(let i=0;i<result.data.list.length;i++) {
	                                this.followList[i].content = '<div>' + this.followList[i].content.split('\n').join('</div><div>') + "</div>"
	                           }
	                            this.pagingData.total=result.data.total
	                            this.pagingData.pageNum = result.data.pageNum > 0 ? result.data.pageNum : 1;
        					}else{
        						this.followList=[]
        						this.showEmpy=true
        					}
                        } else {
                            Message.error(result.message);
                        }
        			})
			},
			
			handleCurrentChange(val){
				this.pagingData.pageNum = val;
                this.getBrandFollowInfoListByPage()
			},
			handleSizeChange(val){
				this.brandDetail.pageSize = val;
                this.pagingData.pageNum = 1;
                this.getBrandFollowInfoListByPage()
			},
			
			getHasFirst(){
				this.$store.dispatch('getHasFirst',{brandId:this.brandId})
        			.then((response) => {
        				let result = response.data;
        				if (result.data == true) {
        					this.sortField='orders'
        					this.sortOrder='desc'
        					this.getBrandFollowInfoListByPage()
                       }else{
                        	this.sortField='gmt_create'
        					this.sortOrder='desc'
        					this.getBrandFollowInfoListByPage()
                        }
                        
        			})
        			.catch((error) => {
        				
                    })
			},
			
			listUp(index){
				this.$store.dispatch('getGoFirst',{'id':index})
        			.then((response) => {
        				let result = response.data;
        				if (result.successed == true) {
        					this.pagingData.pageNum=1
        					this.sortField='orders'
        					this.sortOrder='desc'
        					this.getBrandFollowInfoListByPage()
                        }
        			})
        			.catch((error) => {
        				
                    })
			},
			
			//获取品牌详细信息
			getBrandDetailInfo(){
				this.$store.dispatch('brandDetailInfo',{brandId:this.brandId})
					.then((response)=>{
						if(response.data){
							let result = response.data;
        					if(result.successed == true){
	                            if(result.data){
	                            	//pageTab
		                            if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
		                                let arr = this.pageTabsList;
		                                arr[arr.length-1].name = result.data.brandName;
		                                this.$store.commit('PAGETABSLIST',{data:arr})
		                            }
	                            	this.brandDetail.brandName=result.data.brandName
	                            	this.brandDetail.customerName=result.data.customerName
	                            	this.brandDetail.salesPerson=result.data.saleMemberName
	                            	this.brandDetail.knowLedgePerson=result.data.iprMemberName
	                            	this.brandDetail.purchaser=result.data.purchaseMemberName
	                            	this.brandDetail.buttPerson=result.data.dockMemberName
	                            	
	                            	this.brandDetail.userName=result.data.contactorName
	                            	this.brandDetail.tel=result.data.contactTel
	                            	if(result.data.contactTel){
	                            		this.showTel=true
	                            	}else{
	                            		this.showTel=false
	                            	}
	                            	
	                            	this.brandDetail.phone=result.data.contactPhone
	                            	this.brandDetail.qq=result.data.qq
	                            	
	                            	if(result.data.appealFlag==1){
	                            		this.brandDetail.serviceFlag=true
	                            	}else if(result.data.appealFlag==0){
	                            		this.brandDetail.serviceFlag=false
	                            	}
	                            	
	                            	if(result.data.priceTableFlag==1){
	                            		this.brandDetail.isPriceList='是'
	                            	}else if(result.data.priceTableFlag==0){
	                            		this.brandDetail.isPriceList='否'
	                            	}
	                            	
	                            	if(result.data.whiteListFlag==1){
	                            		this.brandDetail.isWhiteList='是'
	                            	}else if(result.data.whiteListFlag==0){
	                            		this.brandDetail.isWhiteList='否'
	                            	}
	                            	this.brandDetail.complaintsAccount=result.data.appealAccount
	                            	this.brandDetail.complaintsPwd=result.data.appealPasswd
	                            	this.brandDetail.emailPwd=result.data.appealEmailPasswd
	                            	this.brandDetail.complaintsAccountTel=result.data.appealMobile
	                            	
	                            	if(result.data.dataStatus==1){
	                            		this.brandDetail.numberFlag=true
	                            	}else if(result.data.dataStatus==-1){
	                            		this.brandDetail.numberFlag=false
	                            	}
	                            	
//	                            	if(result.data.hasBrandAccount==1){
//	                            		this.disabledService=false
//	                            	}else if(result.data.hasBrandAccount==0){
//	                            		this.disabledService=true
//	                            	}
	                            	
	                            	this.brandDetail.brandLevel=String(result.data.brandType)
	                            	this.brandDetail.urgentState=String(result.data.energencyFlag)
	                            	this.brandDetail.totalTypeState=result.data.assgineType
	                            }
	                        }
        				}else{
        					//this.disabledService=true
        					this.disabled=true
        					this.disabledSelect=true
        				}
					})
					.catch((error) => {
        				Message.error('数据不存在');
                    })
				
			},
			//取Url参数
			getUrl() {
			    var url = location.search; 
			    var theRequest = new Object();
			    if (url.indexOf("?") != -1) {
			        var str = url.substr(1);
			        var strs = str.split("&");
			        for(var i = 0; i < strs.length; i ++) {
			            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
			        }
			    }
		    	this.brandId=theRequest.id
		    	if (theRequest.flag==1) {
		    		this.disabled=false
		    		this.showButton=true
		    	}else if(theRequest.flag==0){
		    		this.disabled=true
		    		this.showButton=false
		    	}
			}
			
		},
		
		created() {

			
		},
		watch: {
            $route:function () {
                this.getUrl()
				this.getBrandDetailInfo()
				this.getHasFirst()
            }
        },
    }
	
</script>

<style lang="scss">
	.table{
		margin-top: 10px;
        border: 1px solid #ccc;
        font-size: 14px;
        .header_row {
	        border-bottom: 1px solid #ccc;
	        line-height: 40px;
	        font-weight: bold;
	        color: #008dd8;
	        text-indent: 10px;
	        background: #f1f2f2;
	    }
	    .col_2, .col_4 {
	        text-align: left;
	        text-indent: 3px;
	    }
	
	    .col_1, .col_3 {
	        text-align: right;
	        background: #f1f2f2;
	    }
	    .col_1, .col_2, .col_3 {
	        border-right: 1px dotted #ccc;
	        border-bottom: 1px dotted #ccc;
		    &:last-child {
		         border-bottom: none
		    }
	    }
	    .col_4 {
	        border-bottom: 1px dotted #ccc;
	    }
	    .el-col {
	        height: 40px;
	        line-height: 40px;
		    .el-button-group {
		        margin-left: 10px;
		    }
    	}
    	.content_title, .content_text {
	        height: 300px;
	    }
	    textarea {
	        resize: none;
	        height: 300px;
	    }
    	.table_action_row {
	        text-align: center;
	        background: #f1f2f2;
	    }
	    .Tel{
	    	color: red;
	    }  
	}
	.paging{
    	margin-top: 15px;
    }
	.el-date-editor.el-input{
		width: 215px;
	}
	.follow_list {
        margin-top: 20px;
        border: 1px solid #ccc;
        font-size: 14px;
        min-width: 1040px;
        .el-col {
            height: 40px;
            line-height: 40px;
            border-right: 1px dotted #ccc;
            border-bottom: 1px dotted #ccc;
            text-indent: 12px;
        &:last-child {
             border-right: none;
         }
        }
        .follow_content {
            height:auto;
            min-height: 40px;
            padding: 5px 10px;
            border-bottom: none;
            word-spacing:0px;
            div{
                line-height: 24px;
            }
        }
        .audio-pause,
        .audio-play{
            width: 25px;
            height: 25px;
            vertical-align: middle;
            cursor: pointer;
        }
        .time_sty{
            line-height: 16px;
            vertical-align: middle;
            width: 100px;
            text-indent: 0;
            display: inline-block;
            word-wrap:break-word
        }
    }
    .empy{
    	margin-top: 20px;
        border: 1px solid #ccc;
        font-size: 14px;
        min-width: 1040px;
        .el-col {
        	text-align: center;
        	color: #5e7382;
            height: 60px;
            line-height: 60px;
            border-right: 1px dotted #ccc;
            border-bottom: 1px dotted #ccc;
            text-indent: 12px;
        }
    }
    .el-form {
			.el-form-item {
				width: 60%
			}
		}
	
	.selectForm{
		margin:20px 0;
	}
</style>